<template>
  <div class="bgff p20">
    <el-form :inline="true" :model="formInline" class="demo-form-inline" v-if="level!=5">
      <el-form-item label="所属区域">
        <el-select v-model="gatewayId" placeholder="请选择" clearable>
          <el-option v-for="item in gatewaylist" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button size="medium" type="primary" @click="onSubmit">查询</el-button>
        <el-button size="medium" type="primary" @click="reset">重置刷新</el-button>
      </el-form-item>
      <el-form-item v-if="level==1||level==2">
        <el-button size="medium" type="primary" @click="addNet">增加设备</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="tableData"
      v-loading="loading"
      row-key="id"
      border
      style="width: 100%"
      empty-text="暂无数据"
    >
      <el-table-column
        :index="(index)=>{return (index+1) + (curPage - 1) * size }"
        label="序号"
        type="index"
        width="50"
      ></el-table-column>
      <el-table-column prop="name" label="设备名字" min-width="150"></el-table-column>
      <el-table-column prop="gateways.name" label="所属网关" min-width="150"></el-table-column>
      <el-table-column prop="status" label="设备状态" min-width="80">
        <template slot-scope="scope">
          <em v-if="scope.row.status==0">离线</em>
          <em v-else-if="scope.row.status==1" style="color:#67b91a;">正常</em>
          <em v-else-if="scope.row.status==2" style="color:#ef3535;">报警</em>
          <em v-else>-</em>
        </template>
      </el-table-column>
      <el-table-column prop="phase_type" label="设备相位" min-width="150">
        <template slot-scope="scope">
          <em v-if="scope.row.phase_type==1">单相</em>
          <em v-else-if="scope.row.phase_type==3">三相</em>
        </template>
      </el-table-column>
      <el-table-column prop="adr" label="断路器地址" min-width="150"></el-table-column>
      <el-table-column prop="imei" label="IMEI" min-width="150"></el-table-column>
      <el-table-column prop="gateway_address" label="地址" min-width="150"></el-table-column>
      <el-table-column prop="create_time" label="创建时间" min-width="160">
        <template
          slot-scope="scope"
        >{{new Date(scope.row.create_time).format('yyyy-MM-dd hh:mm:ss')}}</template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <detail :gat_id="scope.row.id"></detail>
          <em v-if="level==1||level==2">
            <el-button size="mini" type="text" @click="edit(scope.row)">编辑</el-button>
            <create ref="editr" :is_create="false" :sup_this="sup_this"></create>
            <el-button size="mini" type="text" @click="associatedUserFn(scope.row)">关联用户</el-button>
            <associated-user ref="auser"></associated-user>
          </em>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="mt20"
      @current-change="handlePage"
      @size-change="handleSizeChange"
      :current-page.sync="curPage"
      :page-size="size"
      :page-sizes="[5,10]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
    <create ref="create" :is_create="true" :sup_this="sup_this"></create>
  </div>
</template>

<script>
import detail from "./modul/detail";
import create from "./modul/create";
import associatedUser from "./modul/associatedUser";
import { _eqmtList, _gatewaysAllGet } from "@/http/ajax";
export default {
  components: { detail, create, associatedUser },
  data() {
    return {
      sup_this: this,
      loading: false,
      dialog: false,
      formInline: {
        user: "",
        region: ""
      },
      tableData: [],
      curPage: 1,
      size: 10,
      total: 0,
      level: sessionStorage.level,
      gatewayId: "",
      gatewaylist: []
    };
  },
  created() {
    this.getList();
    this.getGatewaysAll();
  },
  methods: {
    // 获取设备列表
    getList() {
      let data = {
        page: this.curPage - 1,
        size: this.size,
        level: sessionStorage.level,
        gatewayId: this.gatewayId,
        type: sessionStorage.level == 5 ? "5" : "",
        sort: "id,desc"
      };
      this.tableData = [];
      this.loading = true;
      _eqmtList(
        data,
        res => {
          this.total = res.totalElements;
          this.tableData = res.content;
          setTimeout(() => {
            this.loading = false;
          }, 600);
        },
        err => {}
      );
    },
    onSubmit() {
      this.getList();
    },
    reset() {
      this.tableData = [];
      this.curPage = 1;
      this.size = 10;
      this.total = 0;
      this.gatewayId = "";
      this.getList();
    },
    // 获取所有网关
    getGatewaysAll() {
      let user = JSON.parse(sessionStorage.user);
      let data = {
        deptId: user.deptId || user.dept.id || "",
        level:sessionStorage.level
      };
      _gatewaysAllGet(
        data,
        res => {
          this.gatewaylist = res;
        },
        err => {}
      );
    },
    addNet() {
      const _this = this.$refs.create;
      _this.dialog = true;
      _this.domInit();
      _this.form = {
        gatewayAddress: "",
        phaseType: "1",
        name: "",
        modelNo: "",
        gatewayId: "",
        cid: "",
        imei: "",
        adr: "",
        status: "0"
      };
    },
    edit(row) {
      const _this = this.$refs.editr;
      _this.form = {
        id: row.id,
        name: row.name,
        gatewayAddress: row.gateway_address,
        modelNo: row.model_no,
        gatewayId: row.gateway_id,
        phaseType: row.phase_type + "",
        imei: row.imei,
        adr: row.adr,
        cid: row.cid,
        keyname: row.keyname,
        status: row.status + "",
        imeiTablename: row.imei_tablename,
        switchOn: row.switch_on,
        a: row.a?row.a/10:0,
        u: row.u?row.u/10:0,
        listA: row.list_a,
        t: row.t
      };
      _this.dialog = true;
      _this.domInit(true);
    },
    associatedUserFn(row) {
      const _this = this.$refs.auser;
      _this.domInit(row.id);
    },
    // 切换页码
    handlePage(val) {
      this.curPage = val;
      this.getList();
    },
    // 切换条数
    handleSizeChange(val) {
      this.size = val;
      this.getList();
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>
